<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
</head>

<body>
    <div id="post"></div>

    <script src="./ajax.js"></script>
    <!-- <script>
        // 需求
        // 1. 获取栏目列表
        // 2. 在栏目列表的第一个栏目中获取文章列表
        // 3. 获取文章列表的第二篇文章, 渲染在页面上

        // 这种回调函数会产生所谓的回调地狱
        $.ajax({
            url: '/category',
            success: function(res) {
                console.log('栏目 id',res.data[0].id);
                const firstCateId = res.data[0].id
                $.ajax({
                    url: '/post?category=' + firstCateId,
                    success: function(res) {
                        console.log('文章 id',res.data[1].id);
                        const secondPostId = res.data[1].id
                        $.ajax({
                            url: '/post/' + secondPostId,
                            success: function(res) {
                                const postDetail = res.data.content
                                console.log(postDetail);
                                 const dom = document.querySelector('#post')
                                 dom.innerHTML = postDetail
                            }
                        })
                    }
                })
            }
        })
    </script> -->
    <script>
        // 1. 获取栏目列表
        // 2. 在栏目列表的第一个栏目中获取文章列表
        // 3. 获取文章列表的第二篇文章, 渲染在页面上
        axios({
            url: '/category'
        })
            .then(res => {
                console.log(res);
                const firstCateId = res.data[0].id
                console.log('栏目 id', firstCateId);
                return axios({
                    url: '/post?category=' + firstCateId
                })
            }).then(res => {
                const secondPostId = res.data[1].id
                console.log('文章 id', secondPostId);
                return axios({
                    url: '/post/' + secondPostId
                })
            }).then(res => {
                const postDetail = res.data.content
                console.log(postDetail);
                const dom = document.querySelector('#post')
                dom.innerHTML = postDetail
            }).catch(err => {
                console.log(err);
            })
    </script>
    <script>
        // async / await
        // async function sendRequest() {

        //     let res = await axios({
        //         url: '/category'
        //     })

        //     const firstCateId = res.data[0].id
        //     console.log('栏目 id', firstCateId);

        //     res = await axios({
        //         url: '/post?category=' + firstCateId
        //     })

        //     const secondPostId = res.data[1].id
        //     console.log('文章 id', secondPostId);

        //     res = await axios({
        //         url: '/post/' + secondPostId
        //     })

        //     const postDetail = res.data.content
        //     console.log(postDetail);

        //     const dom = document.querySelector('#post')
        //     dom.innerHTML = postDetail
        // }

        // sendRequest().catch(err => {
        //     console.log(err);
        // })

    </script>
</body>

</html>